<template>
  <div id="app" >
      <el-input v-model="id" placeholder="请输入品牌商ID" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="name" placeholder="请输入品牌商名称" style="width:300px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button @click="getBrandList" type="primary" size="small">查询</el-button>
     <el-button @click="insertBrands" type="primary" size="small">添加</el-button>
     <!-- <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button> -->
    <el-table :data="tableData" border style="width: 74%">
      <el-table-column fixed prop="id" label="品牌商ID" width="120"></el-table-column>
      <el-table-column prop="name" label="品牌商名称" width="120"></el-table-column>
       <el-table-column label="品牌商图片" width="120">
          <template slot-scope="scope">
          <img :src="scope.row.picUrl" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="介绍" width="400"></el-table-column>
      <el-table-column prop="floorPrice" label="底价" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
           <el-button @click="upd(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="delClick(scope.row.id)" type="danger" size="small">删除</el-button> 
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[1, 5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!-- 添加/修改 -->
<el-dialog title="创建" :visible.sync="addFlag">
      <el-form :model="form" :rules="rules">
          <el-input v-model="form.id" type="hidden"  autocomplete="off"></el-input>
        <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
   <el-form-item label="介绍" :label-width="formLabelWidth" >
      <el-input v-model="form.desc" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="底价" :label-width="formLabelWidth" >
      <el-input v-model="form.floorPrice" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="品牌商图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action
            :auto-upload="false"
            :limit="10"
            multiple
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
            :on-remove="handleRemove"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="addBrands()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "app",
  mounted() {
    this.getBrandList();
  },
  methods: {
    getBrandList() {
      var $this=this;
      this.axios({
        method: "get",
        url: "http://localhost:8081/ecBrand/xujiabao/brandlist",
        params: {
          pageNo: this.currentPage4,
          pageSize: this.pageSize,
          id:$this.id,
          name:$this.name,
        }
      }).then(function(res) {
        console.log(res);
        $this.tableData = res.data.obj.list;
        $this.total=res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getBrandList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getBrandList();
    },
    insertBrands(){
      var $this = this;
      this.fileList =[];
      this.addFlag = true;
    },
    addBrands() {
      var formData = new FormData();
      for (var o in this.form) {
        formData.append(o, this.form[o]);
      }
      console.log("this.fileList:{}", this.fileList);

      this.fileList.forEach(function(file) {
        console.log(file);
        if (file.raw) {
          formData.append("files", file.raw, file.name);
        }
      });

      //设置图片上传的格式
      let config = {
        "Content-Type": "multipart/form-data"
      };

      for (var key of formData.keys()) {
        console.log("key:{},value:{}", key, formData.get(key));
      }

      console.log(formData);
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:8081/ecBrand/xujiabao/brandAddOrUpd",
        data: formData,
        config: config
      }).then(function(res) {
        if (res.data.code == 200) {
          alert("成功");
          $this.addFlag = false;
          $this.form = {};
          $this.getBrandList();
        }else{
             alert("请正确添加或修改");
        }
      });
    },
    handlerChange(file, files) {
      this.fileList = files;
      console.log("----fileList:{}", this.fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      console.log("删除之前this.imageUrs", this.imageUrs);

      for (var i = 0; i < this.imageUrs.length; i++) {
        if (this.imageUrs[i] == file.url) {
          this.imageUrs.splice(i, 1);
        }
      }
      console.log("删除之后this.imageUrs", this.imageUrs);
    },
    upd(row) {
      var $this = this;
      $this.fileList = [];
      this.axios({
        method:'post',
        url: "http://localhost:8081/ecBrand/xujiabao/getBrandById?id="+row.id
      }).then(function(res){
        $this.form = res.data.obj;
        var tmp = {};
        tmp.name = res.data.obj.picUrl;
        tmp.url = res.data.obj.picUrl;
        $this.fileList.push(tmp);
        $this.addFlag = true;
      })
    },
    delClick(row){
      var $this=this;
      this.axios({
        method:'post',
        url: "http://localhost:8081/ecBrand/xujiabao/logicdel?id="+row,
      }).then(function(res){
          if(res.data.code==200){
              alert("删除成功");
              $this.getBrandList();
          }else{
            alert("删除有误");
          }
      })
    },
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      currentPage4: 1,
      pageSize: 2,
      tableData: [],
      total: 2,
      addFlag: false,
      form: {},
      updateform: {},
      rules: {},
      formLabelWidth: "120px",
      fileList: [],
      imageUrl: "",
      imageUrs: [],
      picUrl:[],
      images: [],
      id:'',
      name:'',
      rules: {
        name: [
          { required: true, trigger: "blur" ,message: "品牌商名称不能为空"},
          { min: 1, max: 10, trigger: "blur" }
        ],
      }
    };
  }
};
</script>

